<template>
  <view class="container">
    <view v-for="(question, index) in questions" :key="question.id" class="question">
      <view class="title">
        <text class="number">{{ index + 1 }}、</text>
        <text class="text">
          {{ question.title }} ({{ question.type === 'single' ? '单选' : '多选' }})
        </text>
      </view>
      <view class="line"></view>
      <view class="choices">
        <!-- 单选题 -->
        <radio-group
          v-if="question.type === 'single'"
          :value="question.selectedAnswer"
          @change="updateAnswer(question.id, $event.detail.value)"
        >
          <label
            v-for="(option, optIndex) in question.options"
            :key="optIndex"
            class="option-label"
          >
            <radio :value="option">{{ option }}</radio>
          </label>
        </radio-group>

        <!-- 多选题 -->
        <checkbox-group
          v-else-if="question.type === 'multiple'"
          :value="question.selectedAnswer"
          @change="questionnaireStore.updateAnswer(question.id, $event.detail.value)"
        >
          <label
            v-for="(option, optIndex) in question.options"
            :key="optIndex"
            class="option-label"
          >
            <checkbox :value="option">{{ option }}</checkbox>
          </label>
        </checkbox-group>
      </view>
    </view>

    <view class="submit">
      <button class="confirm-btn" @click="toResult">提交自测</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useQuestionnaireStore } from '@/store/questionnaire'
const questionnaireStore = useQuestionnaireStore()
const questions = computed(() => questionnaireStore.questions)
const totalScore = computed(() => questionnaireStore.totalScore)
const { updateAnswer } = questionnaireStore

const toResult = () => {
  console.log(questions.value)
  console.log('最终得分:', totalScore.value)
  // questionnaireStore.clearUserChoices()
  uni.navigateTo({
    url: '/pages/questionnaire/result',
  })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  width: 100vw;
  background: linear-gradient(180deg, rgba(215, 229, 247, 1) 0%, rgba(217, 234, 251, 0) 100%);
}
.question {
  padding: 10px;
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  .title {
    display: flex;
    font-size: 15px;
    margin-bottom: 10px;
    margin-left: 5px;
    .number {
      color: #007aff;
      font-weight: bold;
    }
    .text {
      color: #484848;
    }
  }
  .line {
    width: 100%;
    height: 1px;
    background-color: #ececec;
  }
  .choices {
    margin-top: 5px;
    radio-group,
    checkbox-group {
      display: flex;
      flex-direction: column;
      label {
        margin-left: 5px;
        margin-top: 5px;
      }
      radio::before,
      checkbox::before {
        right: 0;
        left: 5px;
      }
    }
  }
}
.submit {
  display: flex;
  justify-content: center;
  .confirm-btn {
    width: 80%;
    background-color: #0075fe;
    border-radius: 12px;
    color: #eee;
    margin-top: 20px;
    margin-bottom: 30px;
  }
}
</style>
